<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
    <script src="../Ajs/vue.min.js"></script>
</head>
<body>

<div id="box">
    <div>
        <span>名：</span>
        <span><input type="text" v-model="firstName"></span>
    </div>
    <div>
        <span>姓：</span>
        <span><input type="text" v-model="lastName"></span>
    </div>
    <span style="color:red">watch实现</span>
    <div>{{fullName}}</div>
    <span style="color:red">computed实现</span>
    <div>{{fullName1}}</div>
</div>

<script>
    /*
    watch 监听器
        数据变化是执行异步或开销较大的操作


    */
    var vm = new Vue({
        el:"#box",
        data:{
            firstName:"",
            lastName:"",
            fullName:""
        },
        computed:{
            fullName1(){
                return this.lastName +""+this.firstName;
            }
        },
        watch:{
            firstName:function(val){   //方法名 和 data中的值要一致，说明你要监听的值
                this.fullName = this.lastName +""+val;
            },
            lastName:function(val){
                this.fullName = val +""+this.firstName;
            }
        }
    });
</script>

</body>
</html>
